<!--评估任务 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
       <el-row>
         <el-form :model="form" ref="queryForm" label-width="110px">
           <el-col :span="8">
             <el-form-item label="业务:">
               <el-select placeholder="请选择业务" clearable filterable v-model="form.evaluateQuestBusiness">
                 <el-option v-for="(item,index) in businessList" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="评估周期:">
               <el-select filterable clearable placeholder="请选择周期" v-model="form.evaluateQuestCycle">
                 <el-option v-for="(item,index) in cycleList" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="评估任务名称:">
               <el-input v-model="form.evaluateQuestTitle"  placeholder="请输入评估任务名称" clearable/>
             </el-form-item>
           </el-col>
           <el-col :span="9">
             <el-form-item label="评估完成时间:">
               <el-date-picker
                 type="daterange"
                 v-model="timeValue"
                 range-separator="至"
                 value-format="yyyy-MM-dd"
                 format="yyyy-MM-dd"
                 start-placeholder="开始日期"
                 end-placeholder="结束日期">
               </el-date-picker>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-button type="primary" icon="el-icon-search"  @click="queryTableList">搜索</el-button>
             <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
           </el-col>
         </el-form>
       </el-row>
        <div style="display: flex;justify-content: space-between;height: 40px;line-height: 40px">
          <p>共找到评估任务共<span style="color: #46a6ff">{{total}}</span>起</p>
          <div style="color: #46a6ff;cursor: pointer;display: flex" @click="sortQuery">
            <span>完成时间</span>
            <div :style="{transform:`rotate(${form.orderBySort === 'desc' ? 0 : -180}deg)`}">
              <span class="iconfont icon-sort-asc-full"></span>
            </div>
          </div>
        </div>
        <el-table v-loading="loading" :data="historyList" border>
          <el-table-column label="序号" width="50" align="center" type="index" />
          <el-table-column label="评估任务" align="center"  prop="evaluateQuestTitle" />
          <el-table-column label="业务" align="center"  prop="evaluateQuestBusiness" />
          <el-table-column label="评估周期" align="center"  prop="evaluateQuestCycle" />
          <el-table-column label="考核项" align="center">
            <template slot-scope="scope">
              {{scope.row.evaluateQuestIndexSum}}项
            </template>
          </el-table-column>
          <el-table-column label="开始时间" align="center" prop="startTime"></el-table-column>
          <el-table-column label="完成时间" align="center" prop="endTime"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" @click="goIndex(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="historyList.length > 0" style="height: 50px;display: flex;align-items: center;justify-content: center;">
<!--          @current-change="onPageChange"-->
          <el-pagination :page-size="form.pageSize" background layout="prev, pager, next" :total="total"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import someQuery from '@/mixins/search'
  import { queryHistory,queryExpertList } from '@/api/eval'
  import { parseTime } from '../../../utils/ruoyi'
  export default {
    name: "history",
    mixins:[someQuery],
    data() {
      return {
        total: 0,
        // 遮罩层
        loading: false,
        //历史数据
        historyList: [],
        form: {
          evaluateQuestBusiness:'',//业务
          evaluateQuestCycle:'',//周期
          evaluateQuestTitle:'',//评估任务名称
          orderBySort:'desc',
          pageNum: 1,
          pageSize: 10,
          params:{
            beginTime:'',//开始时间
            endTime:'',//结束时间
          },
        },
        timeValue:'',
      };
    },
    watch: {
      timeValue:{
        handler:function(newVal,oldVal) {
          if (newVal instanceof Array) {
            this.form.params.beginTime = newVal[0] + ' 00:00:00'
            this.form.params.endTime = newVal[1] + ' 23:59:59'
          }else {
            this.form.params.beginTime = this.form.params.endTime = ''
          }
        },
        deep:true
      }
    },
    created() {

      this.queryTableList()
    },
    methods: {
      goIndex(item) {
        this.$router.push({
          path:"historydetail",
          query:{
            id:item.id
          }
        });
      },
      /** 重置按钮操作 */
      resetQuery() {
       for (let key in this.form) {
         if (typeof this.form[key] === 'string') {
           this.form[key] = ''
         }
       }
       this.timeValue = ''
      },
      // 排序
      sortQuery() {
        this.form.orderBySort = this.form.orderBySort === 'desc' ? 'asc' : 'desc'
        this.queryTableList()
      },
      // 查询历史数据
      queryTableList() {
        console.log(this.form)
        this.loading = true
        queryHistory(this.form).then((res) => {
          console.log('res--->',res)
          this.historyList = res.rows
          this.total = res.total
          this.loading = false
        }).catch(err => {
          this.historyList = []
          this.loading = false
        })
      },
    },
  };
</script>

<style lang="scss" scoped>
.icon-sort-asc-full{
  margin-left: 5px;
  transition: all .5s ease-in-out;
}
p{
  margin: 0;
  padding: 0;
}
  ::v-deep .el-dialog__header {
    background-color: #354161;
    padding-bottom: 20px;
  }

  ::v-deep .el-dialog__footer {
    background-color: #f1f2f4;
    padding-top: 20px;
  }

  ::v-deep .el-dialog__title {
    color: white;
  }

  ::v-deep .czlialog {
    margin-top: 20vh;
  }

  .flex-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .inner-container {
    width: 80%;
  }

  .info-row {
    height: 40px;
  }

  .flex-row {
    display: flex;
    align-items: center;
  }

  .label {
    width: 30%;
    text-align: right;
    margin-right: 10px;
    font-weight: 900;
  }

  .value {
    width: 70%;
  }

  /* Assuming el-input is a custom component, you might need additional styling */
  .input-field {
    width: 70%;
  }

  /* 头部 */
  .task_top {
    height: 150px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    padding: 20px;
  }

  .task_top_1 {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .task_top_1 p {
    font-size: 20px;
    color: rgb(40, 121, 228);
    font-family: "微软雅黑";
    font-weight: bold;
  }

  .task_top_1 span {
    font-size: 15px;
    color: #bbb;
    font-family: "微软雅黑";
    margin-left: 20px;
    transform: translateY(3px);
  }

  .task_top_2 {
    margin-top: 10px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 15px;
  }

  ::v-deep .el-select.el-select--medium {
    width: 100%;
  }

  ::v-deep .blue label {
    color: blue;
  }
</style>
